<template>
	<view class="video-detail-container">
		<view class="video-box">
			<video id="myVideo" class="video" :src="videoData.play_url" :danmu-list="danmuList" enable-danmu  danmu-btn />
			<hot-video-info :data='videoData'/>
		</view>
		<!-- 弹幕列表 -->
		<view class="danmu-box">
			<!-- 弹幕数据加载中 -->
			<uni-load-more status="loading" v-if="isLoadingComment"/>
			<!-- 无弹幕数据 -->
			<empty-data v-else-if="commentList.length===0"></empty-data>
			<!-- 弹幕列表 -->
			<view class="comment-container" v-else>
				<view class="all-comment-title">全部评论</view>
				<view class="list">
					<block v-for="(item,index) in commentList" :key="index">
						<article-comment-item :data="item"></article-comment-item>
					</block>
				</view>
			</view>
		</view>
		<!-- 底部功能区 -->
		<article-operate 
		:articleData="videoData"
		@commitClick='onCommit' 
		placeholder="发个弹幕开心一下..."
		@changePraise="onChangePraise"
		@changeCollect="onChangeCollect"
		/>
		<uni-popup ref="popup" type="bottom" @change="onCommitPopupChange">
			<article-comment-commit v-if="isShowCommit" :articleId="videoData.id" @success="onSendDanmu"></article-comment-commit>
		</uni-popup>
	</view>
</template>

<script>	
	import  {mapState,mapMutations } from 'vuex'
	import {getVideoDanmuList} from 'api/video'
	import {getRandomColor} from 'utils'
	export default {
		data() {
			return {
				//弹幕源数据
				danmuList:[],
				//评论数据
				commentList:[],
				isShowCommit:false,
				videoContext:null,
				isLoadingComment:true
			};
		},
		computed:{
			...mapState('video',['videoData'])
		},
		created() {
			this.loadVideoDanmuList()
		},
		onReady() {
			this.videoContext=uni.createVideoContext('myVideo')
		},
		methods:{
			...mapMutations('video', ['setVideoData']),
			async loadVideoDanmuList(){
				const {data:res} = await getVideoDanmuList({
					videoId:this.videoData.id					
				})
				res.list.forEach(item=>{
					item.color=getRandomColor()
				})
				this.danmuList=[...res.list]
				this.commentList=[...res.list]
				this.isLoadingComment=false
			},
			//发送弹幕的点击事件
			onCommit(){
				this.$refs.popup.open()
			},
			onCommitPopupChange(e){
				if(e.show){
					this.isShowCommit =e.show
				}else{
					setTimeout(()=>{
						this.isShowCommit =e.show
					},200)
				}
				
			},
			onSendDanmu(data){
				this.videoContext.sendDanmu({
					text:data.info.content,
					color:getRandomColor()
				})
				this.commentList.unshift(data.info)
				this.$refs.popup.close()
				this.isShowCommit=false
				uni.showToast({
					title:'发表成功'
				})
			},
			//处理点赞
			 onChangePraise(isPraise) {
			       this.setVideoData({ ...this.videoData, isPraise });
			     },
			//处理收藏
			onChangeCollect(isCollect) {
			      this.setVideoData({ ...this.videoData, isCollect });
			    }
			
		}
	}
</script>

<style lang="scss" scoped>
.video-detail-container {
  .video-box {
    background-color: $uni-bg-color;
    position: sticky;
    top: 0;
    z-index: 9;
    .video {
      width: 100%;
      height: 230px;
    }
  }
  .danmu-box {
    border-top: $uni-spacing-col-sm solid $uni-bg-color-grey;
    margin-bottom: 36px;
	position: sticky;
	z-index: 0;
	/* #ifndef H5 || APP-PLUS */
	bottom:0;
	/* #endif */
	/* #ifdef H5 || APP-PLUS */
	bottom:60px;
	/* #endif */
	
    .comment-container {
      padding: $uni-spacing-col-lg $uni-spacing-row-lg;
      .all-comment-title {
        font-size: $uni-font-size-lg;
        font-weight: bold;
      }
	  .list{
		  
	  }
    }
  }
}
</style>

